<template>
  <div>
    <div style="position:relative;">
      <div :style="{height:n_he+n_top+'px'}">
        <img
          src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC9jNzgyZThlOWRmZGVlNmEyODgxNjQ0Y2JjN2I5YjhlOS05MC53ZWJw.webp"
          style="width:100%;height:400px;"
        />
      </div>
      <div
        style="width:100%; height:100%;background:rgba(0,0,0,.3);position:absolute; left:0;top:0; padding-top:150px;box-sizing: border-box;"
      >
        <h2 style="font-size:48px;color:#fff; padding-top:38px;text-align:center;">客户反馈</h2>
        <p style="font-size:18px; color:#fff; padding:22px 0px;text-align:center;">Customer feedback</p>
        <div style="background:#fff; width:100%;padding-top:80px;" ref="asd">
          <div style="width:80%;margin:auto; overflow: hidden;padding-bottom:50px;">
            <el-carousel :interval="5000" arrow="always">
              <el-carousel-item v-for="i in as">
                <div style="float:left;width:20%;">
                  <img :src="i.img" style="width:100%;" />
                </div>
                <div style="float:left;width:80%;padding:20px;box-sizing: border-box;">
                  <p style="padding:10px 0px;">客户名称</p>
                  <p style="padding:10px 0px;">{{i.title}}</p>
                  <p style="padding:10px 0px;">{{i.text}}</p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div style="width:100%;border-top:1px solid #ccc;padding:80px 0px; ">
              <div style="width:80%;margin:auto; overflow: hidden;">
            <el-row>
              <el-col :span="4" v-for="i in avc">
                <div class="grid-content bg-purple">
                  <img :src="i" alt style="width:100%; height:60px;" />
                </div>
              </el-col>
            </el-row>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      n_he: "",
      n_top: "",
      as: [
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi9jMTJjMWRjMWY1YjljZDk0MDdmNTE2MTRlMDQzMjhkZS5qcGc_p_p100_p_2FYXR0YWNobWVudF9pZD0xMTQxNA_p_p100_p_3D_p_p100_p_3D.jpg",
          title: "VIP5级",
          text:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事，当今最领先的响应式自助建站平台。"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi85YTU5ZGI1MDRjNjJlYmU0N2NlYmI3YTQ5ODAyNWI0MS5qcGc_p_p100_p_2FYXR0YWNobWVudF9pZD0xMTQxMQ_p_p100_p_3D_p_p100_p_3D.jpg",
          title: "VIP10级",
          text:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事，当今最领先的响应式自助建站平台。"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi80N2UyNDkwYjczY2I0YjQ0ZDBhNDdlMTU0NWZhOWRlNS5qcGc_p_p100_p_2FYXR0YWNobWVudF9pZD0xMTQxMg_p_p100_p_3D_p_p100_p_3D.jpg",
          title: "VIP1级",
          text:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事，当今最领先的响应式自助建站平台。"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi9kN2FhMjMyZTVkODI5YWIzMWE1MzM3MmMyOTQ1ODE4My5qcGc_p_p100_p_2FYXR0YWNobWVudF9pZD0xMTQxMw_p_p100_p_3D_p_p100_p_3D.jpg",
          title: "VIP3级",
          text:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事，当今最领先的响应式自助建站平台。"
        }
      ],
      avc: [
        "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC80OTA5MmI3ZDU4ODg1YzQ4Mjc2NGNiMjM4ZjdlMTc5Ny05MC53ZWJw.webp",
        "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC82YzQ1MDQxY2IwMWY3ZjA3ZTJlZDMzMDkyOTk3ZTU2NS05MC53ZWJw.webp",
        "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC83Y2ZmN2Q2MWZkOWYxM2M1ZDNiODU4OWM2YTZkNTgzOC05MC53ZWJw.webp",
        "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC84MDgzZDY0NTQ1MmZlMDQ5YTc1MThmYmEwYTc5Y2Q1Ni05MC53ZWJw.webp",
        "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC85ODgyYjc0YzM4Zjk0MTJlMzI0NDJlMjQwN2M2MzI4OS05MC53ZWJw.webp",
        "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNC8zNTU3ZjkxNDQ1ZGVlODdkYTkzZTEzNTZhMDI1N2IwYy05MC53ZWJw.webp"
      ]
    };
  },
  mounted() {
    // this.$nextTick(() => {
    this.n_he = this.$refs.asd.offsetHeight;
    this.n_top = this.$refs.asd.offsetTop;
    //   console.log(this.$refs.sa)
    // });
  }
};
</script>
<style>
.el-carousel__container {
  height: 200px !important;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>